//开发环境webpack配置
const {resolve} = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 开发环境优化
// HMR: hot module replacement
/*
    作用：模块改变后，只打包编译该模块（而不是全部）
    样式文件：可以用HMR功能，因为style-loader内部实现le 
    js文件:默认没有MHR,在入口文件配置module.hot，只能处理非入口的js文件
    html文件:默认没有MHR，不用使用MHR
    
*/

module.exports = {
    mode:"development",
    entry:"./src/js/index.js",
    output:{
        filename:"js/index.js",
        path:resolve(__dirname,"build")
    },
    module:{
        rules:[
            { //只匹配数组中一个规则
                oneOf:[
                     //处理css 
                    {
                        test:/\.css$/,
                        use:["style-loader","css-loader"]
                    },
                    // 处理less
                    {
                        test:/\.less$/,
                        use:["style-loader","css-loader","less-loader"]
                    },
                    // 处理html 
                    {
                        test:/\.html$/,
                        use:["html-loader"]
                    },
                    //处理图片
                    {
                        test:/\.(jpg|png|gif)/,
                        use:[{
                            loader:"url-loader",
                            options:{
                                name:"[hash:6].[ext]",
                                outputPath:"img",
                                limit:10*1024
                            }
                        }]
                    },
                    //处理其他资源
                    {
                        exclude:/\.(jpg|png|gif|html|css|less|js)/,
                        loader:"file-loader"
                    }
                ]
            }
           
        ]
    },
    // 开发环境
    devServer:{
        port:3000,
        open:true,
        contentBase:resolve(__dirname,"build"),
        hot:true  //hmr 开启热模块交替
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ],
    ////用于调试， 打包后代码映射到源代码位置
    /*
        验证 devtool 名称时， 我们期望使用某种模式，
        注意不要混淆 devtool 字符串的顺序， 模式是： 
        [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.
    */
    devtool:"eval-source-map" // 重构快调试友好
}